30天用React打造AI工具箱 Day3

昨天我們看了變數與資料型態，今天要來進一步補上三個React常用的基礎：

1. 函式（Functions）
2. 陣列（Arrays）
3. 物件（Objects）

這些東西的概念就跟積木一樣，React中各個元件的組裝與資料傳遞就是靠這些完成的

函式

函式是一段可以重複使用的程式碼。React元件本身就是一種函式。

// 傳統寫法
function sayHello(name) {
  return `Hello, ${name}!`;
}

console.log(sayHello("小明")); // Hello, 小明!

// 箭頭函式（React 常用）
const add = (a, b) => a + b;
console.log(add(2, 3)); // 5

在React中，每個元件就是一個回傳JSX的函式。

陣列

陣列是可以存放多個元素的結構。

let fruits = ["apple", "banana", "orange"];

// 讀取元素
console.log(fruits[0]); // apple

// 加入元素
fruits.push("grape");
console.log(fruits); // ["apple", "banana", "orange", "grape"]

// 迭代元素
fruits.forEach(f => console.log(f));

尤其是下面幾個方法在用React寫清單渲染中很常用到：

// map：轉換陣列
let upper = fruits.map(f => f.toUpperCase());
console.log(upper); // ["APPLE", "BANANA", "ORANGE", "GRAPE"]

// filter：過濾陣列
let filtered = fruits.filter(f => f !== "banana");
console.log(filtered); // ["apple", "orange", "grape"]

// reduce：累加
let numbers = [1, 2, 3, 4];
let sum = numbers.reduce((acc, n) => acc + n, 0);
console.log(sum); // 10

物件

物件是由「鍵(key)」與「值(value)」組成的集合。

let person = {
  name: "小明",
  age: 18,
  isStudent: true,
};

// 存取與修改
console.log(person.name); // 小明
person.age = 19;

// 新增屬性
person.hobby = "basketball";

解構與展開運算子

let { name, age } = person;
console.log(name, age); // 小明 19

let newPerson = { ...person, age: 20 };
console.log(newPerson); // 複製並修改 age

在React的props與state更新中，展開運算子很常用到

把上面學到的渲染清單真的用在React上的話，可以這樣寫

// src/App.jsx
export default function App() {
  const fruits = ["apple", "banana", "orange"];

  return (
    <div className="p-6">
      <h1 className="text-2xl font-bold mb-4">水果清單</h1>
      <ul className="list-disc pl-6">
        {fruits.map((f, idx) => (
          <li key={idx} className="mb-1">{f}</li>
        ))}
      </ul>
    </div>
  );
}

而畫面會長這樣

當你在 React 中看到 .map()，幾乎都代表要把一個陣列轉成一堆元素。